<template>
	<div class="jumbotron">
		<form class="form-horizontal" role="form" @submit.prevent="postNewJob">
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<h1>发布职位</h1>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-8">
					<label for="jobName">职位名称</label>
					<input type="text" class="form-control" id="jobName" placeholder="请输入职位名称(必填)" v-model="info.jobName">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-8">
					<label for="entRegion">工作地点</label>
					<p>
						<span>城市索引（按首字母排序）：</span>
						<select v-model="cityFirst">
							<option v-for="city in cityList">
								{{city.title}}
							</option>
						</select></p>
					<p>
						<span>请选择工作地点（必填）：</span>
						<select v-model="info.region">
							<option v-for="zy in selection">
								{{zy}}
							</option>
						</select>
					</p>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-8">
					<p style="color: red;">* 薪水若均填0，则视为面议。最高薪水必须大于等于最低薪水。</p>
					<label for="salaryMin">最低薪水</label>
					<input type="text" class="form-control" id="salaryMin" placeholder="请输入最低薪水" v-model="info.salaryMin">
				</div>
				<div class="col-sm-offset-2 col-sm-8">
					<label for="salaryMax">最高薪水</label>
					<input type="text" class="form-control" id="salaryMax" placeholder="请输入最高薪水" v-model="info.salaryMax">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-8">
					<label for="information">职位描述</label>
					<input type="text" class="form-control" id="information" placeholder="请输入职位描述(必填)" v-model="info.jobDescrip">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-8">
					<label for="entRegion">职位关键词（最多3个）</label>
					<p>
						<span>职位类别：</span>
						<select v-model="tagType">
							<option v-for="tag in tagList">
								{{tag.title}}
							</option>
						</select></p>
					<p>
						<span>请选择职位类目：</span>
						<select v-model="toAddTag">
							<option v-for="lm in tagSelect">
								{{lm}}
							</option>
						</select>
					</p>
					<button type="button" class="btn btn-primary" @click="addTag()">添加TAG</button>
					<button type="button" class="btn btn-danger" @click="clearTag()">清除TAG</button>
					<p></p>
					<ul class="breadcrumb" v-if="info.tag.length>0">
						<li v-for="selTag in info.tag">
							<a>{{selTag}}</a>
						</li>
					</ul>
					<p></p>
				</div>
			</div>
			<!-- <input type="hidden" v-model="info.holderId" /> -->
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-8">
					<button type="submit" class="btn btn-success btn-lg">确定</button>
				</div>
			</div>
		</form>
	</div>
</template>

<script>
	module.exports = {
		data: function() {
			return {
				toAddTag: '',
				info: {
					jobName: '',
					region: '',
					jobDescrip: '',
					salaryMin: 0,
					salaryMax: 0,
					holderId: '',
					tag: []
				},
				cityList: {

				},
				cityFirst: '',
				tagList: {

				},
				tagType: ''
			}
		},
		mounted() {
			$.ajax({
				url: "json/city.json",
				type: 'get',
				dataType: 'json',
				headers: {
					"Content-Type": "application/json",
				},
				success: (data) => {
					this.cityList = data.city;
				},
				error: (err) => {
					console.log("网络异常！")
				}
			});
			$.ajax({
				url: "json/tag.json",
				type: 'get',
				dataType: 'json',
				headers: {
					"Content-Type": "application/json",
				},
				success: (data) => {
					this.tagList = data.tags;
				},
				error: (err) => {
					console.log("网络异常！")
				}
			});
			this.info.holderId = JSON.parse(localStorage.getItem("sysUser")).id;
		},
		computed: {
			selection: function() {
				for (let i = 0; i < this.cityList.length; i++) {
					if (this.cityList[i].title === this.cityFirst) {
						return this.cityList[i].lists;
					}
				}
			},
			tagSelect: function() {
				for (let i = 0; i < this.tagList.length; i++) {
					if (this.tagList[i].title === this.tagType) {
						return this.tagList[i].lists;
					}
				}
			}
		},
		methods: {
			addTag: function() {
				if (this.toAddTag === "" || this.info.tag.length > 2) {
					return;
				}
				for (let i = 0; i < this.info.tag.length; i++) {
					if (this.info.tag[i] === this.toAddTag) {
						return;
					}
				}
				this.info.tag.push(this.toAddTag)
			},
			clearTag: function() {
				this.info.tag = [];
			},
			postNewJob: function() {
				if(checkNull(this.info.jobName,"请输入职位名称！")===false){
					return false;
				}
				if(checkNull(this.info.region,"请选择职位所在地区！")===false){
					return false;
				}
				if(checkNull(this.info.jobDescrip,"请输入职位简介！")===false){
					return false;
				}
				this.info.salaryMin = parseInt(this.info.salaryMin)
				this.info.salaryMax = parseInt(this.info.salaryMax)
				if(isNaN(this.info.salaryMin)){
					alert("请输入正确的最低薪水！")
					this.info.salaryMin=0;
					return false;
				}
				if(isNaN(this.info.salaryMax)){
					alert("请输入正确的最高薪水！")
					this.info.salaryMax=0;
					return false;
				}
				if(this.info.salaryMax<this.info.salaryMin){
					alert("最高薪水不能低于最低薪水！")
					return false;
				}
				this.info.holderId = JSON.parse(localStorage.getItem('sysUser')).id;
				this.info.tag = JSON.stringify(this.info.tag);
				$.ajax({
					url: conf.ur + "/api/enterprise/postNewJob",
					type: 'post',
					dataType: 'json',
					data: JSON.stringify(this.info),
					headers: {
						"Content-Type": "application/json",
						"x-auth-token": window.localStorage.getItem('x-auth-token')
					},
					success: (data) => {
						if (data.code === 0) {
							alert("发布成功！");
							window.location.reload();
						} else {
							alert("发布失败！")
							console.log(JSON.stringify(data))
						}
					},
					error: (err) => {
						console.log("网络异常！")
					}
				});
				return false;
			}
		}
	}
</script>

<style scoped>
	.jumbotron {
		background-color: ghostwhite;
	}
</style>
